<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { CheckSecretSchema, Response, SavedSchema, UserSchema } from '../../utils/schema';
	import { userInfo } from '../../utils/user';
	import { reactive, ref } from 'vue';
	import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
	import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import TnModal from '@/uni_modules/tuniaoui-vue3/components/modal/src/modal.vue'
	import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3'
	import { checkPassword, createPassword } from '../../utils/secret';
	import { OK } from '../../utils/constant';
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnNotice from '@/uni_modules/tuniaoui-vue3/components/notify/src/notify.vue'
	import type { TnNotifyInstance } from '@/uni_modules/tuniaoui-vue3/components/notify'


	const notifyRef = ref<TnNotifyInstance>()

	const data = reactive({
		user: {
			id: 0
		}
	});
	const secret = ref('');
	const createSecret = ref('');
	const showCreatePasswordPopup = ref(false)

	const modalRef = ref<TnModalInstance>()

	const openModal = () => {
		modalRef.value?.showModal({
			title: '提示',
			content: '输入密钥，解锁内容。所有密钥和内容都会加密存储，不会泄漏任何数据。没有提前设置密钥请点击右下角 + 号新增密钥。',
		})
	}

	onLoad(() => {
		userInfo().then((res : Response<UserSchema>) => {
			data.user = res.data
		})

	})

	const checkSecret = () => {
		checkPassword(secret.value).then((res : Response<CheckSecretSchema>) => {
			if (res.code !== OK) {
				uni.showModal({
					title: res.msg
				});
				return
			}
			uni.navigateTo({
				url: '/pages/content/index?id=' + res.data.id,
			})
		})
	}

	const passwordPopup = () => {
		showCreatePasswordPopup.value = !showCreatePasswordPopup.value
	}

	const create = () => {
		createPassword(createSecret.value).then((res : Response<SavedSchema>) => {
			if (res.code !== OK) {
				uni.showModal({
					title: res.msg
				});
				return
			}

			notifyRef.value?.show({
				msg: '创建成功',
			})

			passwordPopup()
		})
	}
</script>

<template>
	<view class="page">
		<image src="../../static/banner.png" mode="widthFix"></image>
		<view class="tn-p-lg">
			<TnTitle mode="hLine" :title=" 'UID:' + data.user.id" color="tn-type-primary" size="32rpx" />
			<view style="height: 40rpx;"></view>
			<TnInput v-model="secret" type="text" placeholder="请输入密码">
				<template #suffix>
					<TnIcon name="help" type="info" size="30rpx" @click="openModal" />
				</template>
			</TnInput>
			<view style="height: 40rpx;"></view>

			<TnButton type="primary" width="100%" height="80rpx" size="lg" @click="checkSecret">验证</TnButton>
		</view>
		<TnModal ref="modalRef" />

		<view class="fab">
			<TnButton type="primary" shape="circle" size="xl" icon="add" @click="passwordPopup"></TnButton>
		</view>
		<TnPopup v-model="showCreatePasswordPopup" open-direction="bottom">
			<view class="tn-p-lg">
				<TnTitle align="center" title="新增密码" color="tn-type-primary" size="xl" style="text-align: center;" />
				<view style="height: 40rpx;"></view>
				<TnInput v-model="createSecret" type="text" placeholder="请输入密码"></TnInput>
				<view style="height: 40rpx;"></view>
				<TnButton type="primary" width="100%" height="80rpx" size="lg" @click="create">确认</TnButton>
			</view>
		</TnPopup>
		<TnNotice ref="notifyRef" />

	</view>
</template>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;

		image {
			margin-top: 100rpx;
		}
	}

	.fab {
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
	}
</style>